﻿var result = document.getElementById("result");
var file = document.getElementById("file");

//判断浏览器是否支持FileReader接口
if (typeof FileReader == 'undefined') {
    result.InnerHTML = "<p>你的浏览器不支持FileReader接口！</p>";
    // alert('你的浏览器不支持FileReader接口！')
    // 并把选择控件设置成不可操作
    file.setAttribute("disabled", "disabled");
}

// 将文件读取为DataURL
function readAsDataURL() {
    // 检验是否为图像文件
    var file = document.getElementById("file").files[0];
    if (!/image\/\w+/.test(file.type)) {
        alert("看清楚，这个需要图片！");
        return false;
    }

    var reader = new FileReader();      // 实例化一个FileReader接口
    reader.readAsDataURL(file);     // 调用FileReader接口的readAsDataURl方法，将文件以Data URL形式读入页面
    reader.onload = function (e) {      // 绑定onload事件，当读取完成时触发
        var result = document.getElementById("result");
        //显示文件
        result.innerHTML = '<img src="' + this.result + '" alt="" />';
    }
}

// 将文件读取为二进制编码
function readAsBinaryString() {
    var file = document.getElementById("file").files[0];

    var reader = new FileReader();
    reader.readAsBinaryString(file);        // 将文件以二进制形式读入页面
    reader.onload = function (e) {
        var result = document.getElementById("result");
        result.innerHTML = this.result;     // 显示选中的文件
    }
}

// 将文件读取为文本
function readAsText() {
    var file = document.getElementById("file").files[0];

    var reader = new FileReader();
    reader.readAsText(file);        // 将文件以文本形式读入页面
    reader.onload = function (e) {
        var result = document.getElementById("result");
        result.innerHTML = this.result;   // 显示文件
    }
}